<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>诉求提交页</title>
    <!-- bootstrap-table表单样式 -->
    <link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
    <!-- 引入 WeUI css -->
    <link rel="stylesheet" th:href="@{/static/admin/weui/weui.min.css}">
</head>
<body>

<div class="page">
    <form class="form-horizontal m"  id="form-add">
    <div class="weui-form">
        <div class="weui-cells__group weui-cells__group_form">
            <div class="weui-cells weui-cells_form">
                <div class="weui-cell weui-cell_active weui-cell_access weui-cell_select weui-cell_select-after" id="appeal">
                    <div class="weui-cell__hd"><label class="weui-label">诉求类型</label></div>
                    <div class="weui-cell__bd" >
                        <input id="appealType" class="form-control weui-input" autocomplete="off" placeholder="请选择"/>
                        <input id="appealTypeId" name="appealTypeId" class="weui-input" type="hidden">
                        <input id="openid" name="openid" class="weui-input" type="hidden" th:value="${openid}">
                    </div>
                </div>
                <div id="formDiv"> </div>

            </div>
        </div>
        <div class="weui-form__extra-area">
            <div class="weui-footer">
                <button type="submit" class="weui-btn weui-btn_primary weui-btn_disabled" href="javascript:" id="showTooltips">确定</button>
            </div>
        </div>
        <div class="weui-form__extra-area">
            <div class="weui-footer">
                <p class="weui-footer__text">Copyright © 2020-2021 zzgfdz.cn</p>
            </div>
        </div>
    </div>
    </form>
    <div id="js_toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">已完成</p>
        </div>
    </div>
</div>
<!--upload-->
<script th:src="@{/static/js/jquery-2.2.3.min.js}" type="text/javascript"></script>
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
<script th:src="@{/static/jQuery-File-Upload-master/js/vendor/jquery.ui.widget.js}"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script th:src="@{/static/jQuery-File-Upload-master/js/jquery.iframe-transport.js}"></script>
<!-- The basic File Upload plugin -->
<script th:src="@{/static/jQuery-File-Upload-master/js/jquery.fileupload.js}"></script>

<script  th:src="@{/static/admin/assets/js/validate/jquery.validate.min.js}" type="text/javascript"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('#appealType').on('click', function () {
            //ajax请求后台获取所有的诉求类型
            $.ajax({
                type : "GET",
                url : "/web/getAppealTypeList",
                data : {},
                async : false,
                success : function(data) {//得到所有的诉求类型
                    var list = [];
                    var res = data.selectList;
                    for(var i = 0; i<res.length;i++){
                        var item = {label:"",value:"",processKey:""};
                        item.label = res[i].name;
                        item.value = res[i].id;
                        item.processKey = res[i].processKey;
                        list.push(item)
                    }
                    //初始化weui的选择器
                    weui.picker(list,{
                        onChange: function (result) {
                            //console.log(result);
                        },
                        onConfirm: function (result) {
                            console.log("result:",result[0]);
                            //点击选择器的确定按钮回调，给对应的dom赋值
                            $('#appealType').val(result[0].label)
                            $('#appealTypeId').val(result[0].value)
                            //同时通过processKey请求后台接口让诉求类型对应的表单渲染出来
                            var processKey = result[0].processKey;
                            $.ajax({
                                type: "GET",
                                url: "/web/getStartFormFieldList?processKey="+processKey,
                                data: {},
                                async: false,
                                success: function (data) {
                                    if(data.code != 200){
                                        $("#formDiv").empty()
                                    }else{


                                    var formInfo = data.formInfo;
                                    var formFieldList = data.formFieldList;
                                    var html='<input id="formId" name="formId" type="hidden" value="'+formInfo.id+'"/>';
                                    $.each(formFieldList, function(i, item){
                                        var target="";
                                        var required = item.fieldRequired;
                                        var fieldType = item.fieldType;
                                        if(required == 1){
                                            if(fieldType == 'text'){
                                                target = '<div class="weui-cell weui-cell_active" >' +
                                                    '<div class="weui-cell__hd">'+
                                                    '<label class="weui-label">'+item.fieldLabel+'</label></div>'+
                                                    '<div class="weui-cell__bd">'+
                                                    '<input class="form-control weui-input" autocomplete="off"  required placeholder="请填写'+item.fieldLabel+'" type="'+ item.fieldType +'" id="' +item.id +'" name="'+item.fieldName+'"/>'+
                                                    '</div></div>'
                                            }else if(fieldType == 'textarea'){
                                                target = '<div class="weui-cell weui-cell_active" >' +
                                                    '<div class="weui-cell__hd">'+
                                                    '<label class="weui-label">'+item.fieldLabel+'</label></div>'+
                                                    '<div class="weui-cell__bd">'+
                                                    '<input class="form-control weui-input" autocomplete="off" required placeholder="请填写'+item.fieldLabel+'" type="'+ item.fieldType +'" id="' +item.id +'" name="'+item.fieldName+'"/>'+
                                                    '</div></div>'
                                            }else if(fieldType == 'file'){
                                                /*target = '<div class="weui-cell weui-cell_active" >' +
                                                    '<div class="weui-cell__hd">'+
                                                    '<label class="weui-label">'+item.fieldLabel+'</label></div>'+
                                                    '<div class="weui-cell__bd file">'+
                                                    '<div class="weui-uploader__input-box">'+
                                                    '<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/!*" multiple="">'+
                                                    '</div>'+
                                                    '<input required  type="hidden" id="fileupload" name="files[]" multiple>'+
                                                    '</div></div>'*/
                                                target = '<div class="weui-cells weui-cells_form" id="uploader">\n' +
                                                    '    <div class="weui-cell">\n' +
                                                    '        <div class="weui-cell__bd">\n' +
                                                    '            <div class="weui-uploader">\n' +
                                                    '                <div class="weui-uploader__hd">\n' +
                                                    '                    <p class="weui-uploader__title">'+item.fieldLabel+'</p>\n' +
                                                    '                    <div class="weui-uploader__info">\n' +
                                                    '                        <span id="uploadCount">0</span>/4\n' +
                                                    '                    </div>\n' +
                                                    '                </div>\n' +
                                                    '                <div class="weui-uploader__bd">\n' +
                                                    '                    <ul class="weui-uploader__files" id="uploaderFiles"></ul>\n' +
                                                    '                    <div class="weui-uploader__input-box">\n' +
                                                    '                        <input id="fileIds" name="'+item.fieldName+'" class="weui-input" type="hidden">\n' +
                                                    '                        <input id="uploaderInput"  class="weui-uploader__input" type="file"\n' +
                                                    '                               accept="image/*" multiple="">\n' +
                                                    '                    </div>\n' +
                                                    '                </div>\n' +
                                                    '            </div>\n' +
                                                    '        </div>\n' +
                                                    '    </div>\n' +
                                                    '</div>'

                                            }

                                        }else{
                                            if(fieldType == 'text'){
                                                target = '<div class="weui-cell weui-cell_active" >' +
                                                    '<div class="weui-cell__hd">'+
                                                    '<label class="weui-label">'+item.fieldLabel+'</label></div>'+
                                                    '<div class="weui-cell__bd">'+
                                                    '<input class="form-control weui-input" autocomplete="off" placeholder="请填写'+item.fieldLabel+'" type="'+ item.fieldType +'" id="' +item.id +'" name="'+item.fieldName+'"/>'+
                                                    '</div></div>'
                                            }else if(fieldType == 'textarea'){
                                                target = '<div class="weui-cell weui-cell_active" >' +
                                                    '<div class="weui-cell__hd">'+
                                                    '<label class="weui-label">'+item.fieldLabel+'</label></div>'+
                                                    '<div class="weui-cell__bd">'+
                                                    '<input class="form-control weui-input" autocomplete="off" placeholder="请填写'+item.fieldLabel+'" type="'+ item.fieldType +'" id="' +item.id +'" name="'+item.fieldName+'"/>'+
                                                    '</div></div>'
                                            }else if(fieldType == 'file'){
                                                /*target = '<div class="weui-cell weui-cell_active" >' +
                                                    '<div class="weui-cell__hd">'+
                                                    '<label class="weui-label">'+item.fieldLabel+'</label></div>'+
                                                    '<div class="weui-cell__bd file">'+
                                                    '<div class="weui-uploader__input-box">'+
                                                    '<input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/!*" multiple="">'+
                                                    '</div>'+
                                                    '<input  type="hidden" id="fileupload" name="files[]" multiple>'+
                                                    '</div></div>'*/

                                                target = '<div class="weui-cells weui-cells_form" id="uploader">\n' +
                                                    '    <div class="weui-cell">\n' +
                                                    '        <div class="weui-cell__bd">\n' +
                                                    '            <div class="weui-uploader">\n' +
                                                    '                <div class="weui-uploader__hd">\n' +
                                                    '                    <p class="weui-uploader__title">'+item.fieldLabel+'</p>\n' +
                                                    '                    <div class="weui-uploader__info">\n' +
                                                    '                        <span id="uploadCount">0</span>/4\n' +
                                                    '                    </div>\n' +
                                                    '                </div>\n' +
                                                    '                <div class="weui-uploader__bd">\n' +
                                                    '                    <ul class="weui-uploader__files" id="uploaderFiles"></ul>\n' +
                                                    '                    <div class="weui-uploader__input-box">\n' +
                                                    '                        <input id="fileIds" name="'+item.fieldName+'" class="weui-input" type="hidden">\n' +
                                                    '                        <input id="uploaderInput"  class="weui-uploader__input" type="file"\n' +
                                                    '                               accept="image/*" multiple="">\n' +
                                                    '                    </div>\n' +
                                                    '                </div>\n' +
                                                    '            </div>\n' +
                                                    '        </div>\n' +
                                                    '    </div>\n' +
                                                    '</div>'
                                            }

                                        }
                                        html =html + target;

                                    })
                                    $("#formDiv").empty()
                                    $("#formDiv").append(html)
                                        /* *
                                         * 图片上传
                                         * */
                                        var uploadCount = 0,  //上传图片的数量
                                            uploadList = [],  //上传的图片
                                            uploadSuccessCount = 0;  //上传成功的数量
                                        var uploadCountDom = document.getElementById("uploadCount");
                                        weui.uploader('#uploader', {
                                            url: "/TFileController/uploadFile",  //你要上传的url地址
                                            auto: true,
                                            type: 'file',
                                            fileVal: 'fileVal',  //文件上传域的name，后台通过该name拿到传输的文件
                                            compress: {
                                                width: 1600,
                                                height: 1600,
                                                quality: .8
                                            },
                                            onBeforeQueued: function onBeforeQueued(files) {
                                                //上传前，对上传的情况做以下多个判断，保证合法性，可自行删改
                                                if (["image/jpg", "image/jpeg", "image/png", "image/gif"].indexOf(this.type) < 0) {
                                                    weui.alert('请上传图片');
                                                    return false;
                                                }
                                                if (this.size > 5 * 1024 * 1024) {
                                                    weui.alert('请上传不超过5M的图片');
                                                    return false;
                                                }
                                                if (files.length > 4) {
                                                    //防止一下子选中过多文件
                                                    weui.alert('最多只能上传4张图片，请重新选择');
                                                    return false;
                                                }
                                                if (uploadCount + 1 > 4) {
                                                    weui.alert('最多只能上传4张图片');
                                                    return false;
                                                }
                                                // if (localStorage.userId == undefined) {
                                                //     weui.alert('请先登录!');
                                                //     return false;
                                                // }

                                                ++uploadCount;
                                                uploadCountDom.innerHTML = uploadCount;
                                            },
                                            onQueued: function onQueued() {
                                                uploadList.push(this);
                                                //手动上传，如果不想选择完图片自动上传可以通过此方法改为手动不过上面的auto要改为false
                                                /*var self = this;
                                                $('#preview_confirm').on('click',function(){
                                                    self.upload();
                                                });*/
                                            },
                                            onBeforeSend: function onBeforeSend(data, headers) {
                                                $("#submit_order").addClass("weui-btn_disabled");
                                                //return false; //阻止文件上传
                                            },
                                            onProgress: function onProgress(procent) {
                                                //console.log(this, procent);
                                            },
                                            onSuccess: function onSuccess(ret) {
                                                console.log("ret:",ret)
                                                if (ret.code == 200) {
                                                    //先获取fileIds输入框的值
                                                    var input = $("#fileIds").val();
                                                    //判断input框内是否为空
                                                    if(input != "" && input != undefined){
                                                        //检测逗号
                                                        var valObj = input.split(",");
                                                        if(valObj.length < 6){//先判断是不是有六条数据
                                                            // 你要填充的数据
                                                            $("#fileIds").val($("#fileIds").val()+","+ret.file.id);//填充数据逗号隔开
                                                        }else{
                                                            alert("只能选择六条！");
                                                        }
                                                    }else {
                                                        //如果input内没有值 那第一条不加逗号
                                                        $("#fileIds").val($("#fileIds").val()+ret.file.id);//填充数据逗号隔开
                                                    }

                                                    uploadSuccessCount++;
                                                    if (uploadSuccessCount == uploadCount) {
                                                        //判断上传是否全部成功
                                                        $("#submit_order").removeClass("weui-btn_disabled");
                                                    }
                                                }
                                                var uploadID = this.id;
                                                $("#uploaderFiles li").each(function () {
                                                    if ($(this).attr("data-id") == uploadID) {
                                                        $(this).attr("db-id", ret.file.id);  //图片后台对应的唯一编号
                                                        $(this).attr("url", ret.file.filePath);  //图片存放地址
                                                    }
                                                });

                                            },
                                            onError: function onError(err) {
                                                console.log(this, err);
                                            }
                                        });
                                        /* *
                                         * 缩略图预览
                                         * */
                                        document.querySelector('#uploaderFiles').addEventListener('click', function (e) {
                                            var target = e.target;

                                            while (!target.classList.contains('weui-uploader__file') && target) {
                                                target = target.parentNode;
                                            }
                                            if (!target) return;

                                            //从图片对应的li标签中获得所需属性
                                            var url = target.getAttribute('url');  //图片存放地址
                                            var DBId = target.getAttribute('db-id');  //图片唯一编号
                                            var id = target.getAttribute('data-id');  //点击图片对应的id
                                            var imgUrl = "/TFileController/tFile/preFile/"+DBId ;//图片回显的url
                                            var gallery = weui.gallery(imgUrl, {
                                                className: 'custom-name',
                                                onDelete: function () {
                                                    //删除图片的回调
                                                    var isDelete = weui.confirm('确定删除该图片？');
                                                    if (isDelete) {
                                                        var input = $("#fileIds").val()
                                                        console.log("input:",input)
                                                        //判断input框内是否只有一个值
                                                        var inputArr = input.split(",");

                                                        var index = inputArr.indexOf(DBId);
                                                        if(index > -1) {
                                                            inputArr.splice(index, 1);
                                                            input = inputArr.toString();
                                                            $("#fileIds").val(input)
                                                        }
                                                        --uploadCount;
                                                        uploadCountDom.innerHTML = uploadCount;  //处理角标
                                                        for (var i = 0, len = uploadList.length; i < len; ++i) {
                                                            var file = uploadList[i];
                                                            if (file.id == DBId) {
                                                                $("#uploaderFiles li").each(function () {
                                                                    //找到对应的li标签，请求后台删除文件
                                                                    if ($(this).attr("db-id") == DBId) {
                                                                        var param = {};
                                                                        param.ids = DBId;

                                                                        $.ajax({
                                                                            url: "/TFileController/remove",
                                                                            type: "delete",
                                                                            contentType: "application/json;charset=UTF-8",
                                                                            dataType: "json",
                                                                            data: JSON.stringify(param),
                                                                            success: function (msg) {
                                                                                console.log(msg);
                                                                            },
                                                                            error: function (xhr, textstatus, thrown) {

                                                                            }
                                                                        });
                                                                    }
                                                                });
                                                                file.stop();
                                                                break;
                                                            }
                                                        }
                                                        target.remove();
                                                        gallery.hide();
                                                    }
                                                }
                                            });
                                        });
                                    }
                                }
                            });
                            $('#showTooltips').removeClass('weui-btn_disabled');
                        },
                        title: '诉求类型'
                    });

                }
            });

        });

         //var $toast = $('#js_toast');
        // $('#showTooltips').on('click', function(){
        //     if ($(this).hasClass('weui-btn_disabled')) return;
        //
        //     // toptips的fixed, 如果有`animation`, `position: fixed`不生效
        //     $('.page.cell').removeClass('slideIn');
        //
        //     if($('').length < 16){
        //         $cell.addClass('weui-cell_warn');
        //         $tooltips.fadeIn(100);
        //         setTimeout(function () {
        //             $tooltips.fadeOut(100);
        //         }, 2000);
        //     }else{
        //         $toast.fadeIn(100);
        //         setTimeout(function () {
        //             $toast.fadeOut(100);
        //         }, 2000);
        //     }
        //
        // });
    });
    $("#form-add").validate({
        rules:{
            appealType:{
                required:true,
            },

        },
        submitHandler:function(form){
            console.log('form:',form)
            add();
        }
    });
    function add() {

        var dataFormJson=$("#form-add").serialize();
        console.log('dataFormJson:',JSON.stringify(dataFormJson))
        $.ajax({
            cache : true,
            type : "POST",
            url : "/web/addAppealInstance",
            data : dataFormJson,
            async : false,
            error : function(request) {
                $.modal.alertError("系统错误");
            },
            success : function(data) {
                weui.toast("操作成功");
                setTimeout('WeixinJSBridge.call("closeWindow")', 1000);
            }
        });
    }



</script>
</body>
</html>